<template>
  <section class="fault-library-view">
    <!-- 搜索栏 -->
    <FaultLibraryHeader
      :init-data="initData"
      class="fault-library-header"
      ref="FaultLibraryHeader"
      @getData="getData"
      @updateExpandedNode="updateExpandedNode"
    >
    </FaultLibraryHeader>

    <div 
      class="fault-library-contain"
      v-loading="loading"
      id="contentDom"
    >
      <list-header
        ref="listHeader"
        @expand="expand"
        @expandAll="expandAll"
        @viewChange="viewChange"
        @canvasChange="canvasChange"
        :curr-zoom-value="currZoomValue"
      />
      <template v-if="faultList.length">
        <tree-list 
          v-if="showTreeView"
          :init-data="initData"
          ref="treeList" 
          :fault-list="faultList"
          @getData="$refs.FaultLibraryHeader && $refs.FaultLibraryHeader.getData()"/>

        <mind-map-list 
          v-else 
          ref="mindMapList"
          :init-data="initData"
          @zoomChange="zoom => currZoomValue = (zoom.toFixed(2) + '')"
          :fault-list="faultList"
          @getData="$refs.FaultLibraryHeader && $refs.FaultLibraryHeader.getData()"
        />
      </template>
      <no-data-view-new v-if="!faultList.length && !loading" style="margin-top:100px;"></no-data-view-new>
    </div>
  </section>
</template>

<script>

import FaultLibraryHeader from '../components/FaultLibraryHeader';
import TreeList from '../components/TreeList';
import MindMapList from '../components/MindMapList';
import ListHeader from '../components/ListHeader'
import NoDataViewNew from '@src/component/common/NoDataViewNew';
import { t } from '@src/locales'

import { librarySelect } from '@src/api/Fault';

export default{
  name:'FaultLibrarView',
  components:{
    FaultLibraryHeader,
    TreeList,
    MindMapList,
    ListHeader,
    NoDataViewNew
  },
  props:{
    initData: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      loading:false,
      // 默认展示树结构
      showTreeView: true,
      // 默认选中的级别
      defaultExpandedKeys:[],
      levelValue: 0,
      levelList: [{
        name: t('component.viewportDropdown.allLevel'),
        value: 0
      }, {
        name: t('common.base.level', {data1:1}),
        value: 1
      }],

      faultList: [],
      currZoomValue: '1'
    }
  },
  methods: {
    updateExpandedNode() {
      this.$refs.treeList.findExpandedNode()
    },
    async getData(params){
      this.loading = true;

      let res = await librarySelect({permissionsHide: false, ...params})

      this.loading = false
      if(res.status === 0){
        this.switchDataList(res.data || [])
        this.faultList = res.data || []
        this.$refs.mindMapList?.reRender(res.data || [])
        this.$refs.listHeader?.setLevel(params)
      }else{
        this.$notify.error({
          title: this.$t('common.base.toast'),
          message: res.message,
          duration: 2000,
        });
      }
    },

    // 试图类型改变
    viewChange(value){
      this.showTreeView = !value;
    },

    // 画布尺寸改变
    canvasChange(value){
      this.currZoomValue = value
      this.$refs.mindMapList.graphZoom(value)
    },
    expand(level){
      
      if(level === 0 ) {
        this.expandAll(true);
        return;
      }

      this.handleCheckedTreeExpand({expand: true, level})
    },

    // 全部展开/收起
    expandAll(expand){
      this.handleCheckedTreeExpand({expand})
      this.$refs.treeList.findExpandedNode()
    },


    // 展开/折叠事件
    handleCheckedTreeExpand({ expand, level }){
      let treeRef = this.$refs.treeList.getTreeRef()
      let treeList = this.faultList
      this.TreeExpandOrFold(treeList, treeRef, expand, level)
      this.$refs.treeList.findExpandedNode()
    },

    // 递归展开/折叠 树
    TreeExpandOrFold(treeList, treeRef, expand, level){
      
      treeList.forEach((item, index)=>{
        const { id, childrenList } = item;
        if(level){
          treeRef.store.nodesMap[id].expanded = treeRef.store.nodesMap[id].level < level ? expand : !expand;
        }else{
          treeRef.store.nodesMap[id].expanded = expand;
        }

        if(childrenList?.length){
          this.TreeExpandOrFold(childrenList, treeRef, expand, level)
        }
      })
    },

    switchDataList(data){
      // 将解决方案solutionList改为childrenList，且把解决方案的元素添加faultDesc字段值为solutionDesc字段
      data.map(item => {
        const { solutionList, childrenList } = item

        if(solutionList?.length){
          solutionList.map(content => {
            content.faultDesc = content.solutionDesc
            content.faultLabel = content.faultLabel || this.$t('faultLibrary.solution')
          })

          item.childrenList = item.childrenList ? [ ...item.childrenList, ...solutionList ] : [ ...solutionList ]
        }

        if(childrenList?.length){
          this.switchDataList(item.childrenList)
        }
      })
    }

    
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/FaultLibraryView';
</style>

<style lang="scss">
.operate-leval{
	.label{
		font-size: 14px;
		line-height: 22px;
		color: #595959;
		padding: 5px 12px;
		cursor: pointer;
		&.select{
			background: #F5F7FA;
		}
	}
}
</style>